import React, { Component } from 'react';
import {StyleSheet, Modal, Text, View, TouchableOpacity, Image, ScrollView, FlatList, StatusBar, TextInput, TouchableHighlight} from 'react-native';
import Confirm from '../../../components/confirm/Confirm'
import { API } from "../../../api";
import Toast from "react-native-easy-toast";
import Loading from "../../../components/loading";
import { base } from "../../../assets/style";
import { txStateType } from "../../../config";
import { getBankBin } from "../../../utils/card";
import { SOCKET_URL } from "../../../config";
import { DeviceStorage } from "../../../utils/DeviceStorage";
import { getLocalTime } from "../../../utils/utils";
import { setCopy } from "../../../utils/utils";
import { WECHAT } from "../../../config";
import { i18n } from "../../../utils/locales/i18n";
import {getUserInfo} from "../../../utils/login";

type Props = {}
export default class BuyOrder extends Component<Props>{
	static navigationOptions = ({ navigation }) => {
		return {
			title: i18n.t('i100'),
			headerStyle: {
				backgroundColor: '#ff7606',
				borderWidth: 0,
				borderColor: '#ff7606'
			},
			headerBackTitle: null,
			headerTintColor: '#fff'
		}
	}
	constructor() {
		super()
		this.state = {
			modalVisible: false,
			loading: false,
			currentToastInfo: '',
			orderData: '',
			bankName: '',
			ws: '',
			currentMessage: '',
			jwt: '',
			username: '',
			chatData: [
				{}
			],
			second: 15 * 60,
			isTimeout: false,
			isCancelTrade: false,
			isConfirmPay: false,
			isPayed: false,
			isFinish: false,
			// 是否已经拿过一次记录了
			isRecord: false,
			showHelp: false
		}
	}
	handleCancel = () => {
		this.setState({
			modalVisible: false
		})
	}
	handleConfirm = () => {
		this.setState({
			modalVisible: false
		})
	}
	// 交易超时
	handleTimeout = () => {
		this.setState({
			second: 15 * 60,
			isTimeout: false
		}, () => {
			setTimeout(() => {
				this.props.navigation.goBack()
			}, 20)
		})
	}

	componentDidMount = async () => {
		await this._initData(this.props.navigation.state.params.orderNumber)
		this.countTime()
		await this._initWebsocket()
	}
	_getBankName = async (number) => {
		const res = await getBankBin(number)
		// bankCode: "ICBC"
		// bankName: "中国工商银行"
		// cardType: "DC"
		// cardTypeName: "储蓄卡"
		this.setState({
			bankData: res
		})
	}
	_initData = async (orderNumber) => {
		const res = await API._fetch('getOrderDetails', { orderNumber })
		// code: 10000
		// data:
		// 	AdId: 18
		// BankName: "张俊生"
		// BankNumber: "6212252006001085148"
		// BuyToken: "fcc"
		// Created: 1546589084
		// Fee: 0
		// Id: 239
		// OrderNumber: "98815ee2cbb825d8"
		// ReferenceNumber: "590830"
		// SellToken: "hkd"
		// State: 1
		// Sum: 10
		// Total: 116
		// TxEndTime: 1546589984
		// TxPartyId: 4
		// TxPartyName: "ldrtech"
		// TxStartTime: 1546589084
		// TxType: 2
		// Type: 1
		// Uid: 17
		// Unit: 11.6
		// __proto__: Object
		// msg: "获取信息成功"
		// status: 200
		if (res.data.State === 3 || res.data.State === 4) {
			// 不需要倒计时(设置一个已经过期的时间)
			res.data.TxEndTime = 1546589984
			// this.setState({
			// 	isPayed: true
			// })
			if (res.data.State === 4) {
				// 已完成
				this.setState({
					isFinish: true
				})
			}
		} else if (res.data.State === 2) {
			this.setState({
				isPayed: true
			})
		}
		this.setState({
			orderData: res.data
		}, () => {
			this._getBankName(res.data.BankNumber)
		})
	}

	// 开启websocket
	// type 1操作 2聊天 3记录
	_initWebsocket = async () => {
		const room = this.state.orderData.OrderNumber
		const jwt = await DeviceStorage.get('jwt')
		const userInfo = await DeviceStorage.get('user_info')
		const username = JSON.parse(userInfo).Username
		const ws = new WebSocket(`${SOCKET_URL}/chat?room=${room}&jwt=${jwt}`)


		ws.onopen = () => {
			// 打开一个连接
			// type 1操作 2聊天 3记录
			// state
			// const sendData = {
			// 	"type": 1,
			// 	"state": 2,
			// 	"content": "xx",
			// 	"timestamp": 1586249522,
			// 	"jwt": "xxx"
			// }
			// ws.send(JSON.stringify(sendData)); // 发送一个消息
		};

		ws.onmessage = (e) => {
			// 接收到了一个消息
			const data = JSON.parse(e.data)
			// console.log('message:', data);
			// code: 10000
			// content: "进入房间，暂无聊天内容"
			// state: 0
			// timestamp: 1546597429498
			// type: 3

			// 普通聊天记录
			// code: 10000
			// content: Array(2)
			// 0: "{"code":10000,"type":2,"content":"Wsnd","state":0,"timestamp":1546603737059,"username":"dewdew"}"
			// 1: "{"code":10000,"type":2,"content":"ds","state":0,"timestamp":1546603499296,"username":"dewdew"}"
			// length: 2
			// __proto__: Array(0)
			// state: 0
			// timestamp: 1546603747355
			// type: 3

			// 之前的状态
			// code: 10000
			// content: Array(1)
			// 0: "{"code":10000,"type":1,"content":"","state":2,"timestamp":1546678496,"username":"dewdew"}"
			// length: 1
			// __proto__: Array(0)
			// state: 0
			// timestamp: 1546679226249
			// type: 3


			if (data.type === 3) {
				// 首次返回，聊天记录
				console.log('record:', data);
				if (this.state.isRecord) {
					return
				}
				if (typeof data.content != "string") {
					// 聊天记录 或者  订单状态
					const temp = []
					data.content.forEach(item => {
						const itemObj = JSON.parse(item)
						if (itemObj.type == 1) {
							// 中间的状态
							itemObj.side = 2
						} else {
							// 真正的聊天记录
							if (this.state.username === itemObj.username) {
								// 右边
								itemObj.side = 0
							} else {
								itemObj.side = 1
							}
						}
						temp.push(itemObj)
					})
					temp.reverse()
					this.setState({
						chatData: [...this.state.chatData, ...temp]
					}, () => {
						this.scrollToEnd()
					})
					// setTimeout(() => {
					// }, 1000)
				}
				this.setState({
					isRecord: true
				})

			} else if (data.type === 2) {
				// 返回新消息
				// code: 10000
				// content: " ASDAFREGRETG"
				// state: 0
				// timestamp: 1546656101118
				// type: 2
				const newData = data
				newData.username = this.state.orderData.TxPartyName
				newData.side = 1
				this.setState({
					chatData: [...this.state.chatData, newData]
				})
				this.scrollToEnd()
			} else if (data.type === 1) {
				// 新的订单状态
				// code: 10000
				// content: ""
				// state: 3
				// timestamp: 1546676400
				// type: 1


				const newOrderTemp = { ...this.state.orderData }
				newOrderTemp.State = data.state
				if (data.state === 3 || data.state === 4) {
					// 如果是过期，更新second
					// 过期
					newOrderTemp.TxEndTime = 1546589984
					this.setState({
						second: -1
					})

					if (data.state === 4) {
						// 已完成
						this.setState({
							isFinish: true
						})
					}
				} else if (data.state === 2) {
					// 已付款
					this.setState({
						isPayed: true
					}, () => {
						this.scrollToEnd()
					})
				}
				// 聊天记录也加上
				const tempChatRecord = {}
				tempChatRecord.side = 2
				tempChatRecord.state = data.state
				tempChatRecord.timestamp = data.timestamp
				this.setState({
					orderData: newOrderTemp,
					chatData: [...this.state.chatData, tempChatRecord]
				}, () => {

					this.scrollToEnd()
				})
			}
		};

		ws.onerror = (e) => {
			// 发生了一个错误
			console.log(e.message);
		};

		ws.onclose = (e) => {
			// 连接被关闭了
			console.log(e.code, e.reason);
		};
		this.setState({ ws, jwt, username })
	}

	// 发送消息
	sendMessage = () => {
		// 打开一个连接
		// type 1操作 2聊天 3记录
		// state
		if (!(this.state.second > 0)) {
			return
		}
		if (!this.state.currentMessage) {
			this.refs.toast.show('消息不能为空')
			return
		}
		const sendData = {
			"type": 2,
			"state": 2,
			"content": this.state.currentMessage,
			"timestamp": new Date().getTime(),
			"jwt": this.state.jwt
		}
		this.state.ws.send(JSON.stringify(sendData));
		this.setState({
			chatData: [...this.state.chatData, {
				"code": 10000,
				"side": 0,
				"content": this.state.currentMessage,
				"state": 0,
				"timestamp": new Date().getTime(),
				"username": this.state.username
			}]
		})
		setTimeout(() => {
			this.scrollToEnd()
			this.setState({
				currentMessage: ''
			})
		}, 20)
	}

	// 取消交易
	cancelTrade = async () => {
		const sendData = {
			"type": 1,
			"state": 3,
			"content": "",
			"timestamp": Math.ceil(new Date().getTime()),
			"jwt": this.state.jwt
		}
		this.state.ws.send(JSON.stringify(sendData));
		setTimeout(() => {
			this.setState({
				isCancelTrade: false
			})
		})
	}

	// 我已付款
	confirmPay = async () => {
		const sendData = {
			"type": 1,
			"state": 2,
			"content": "",
			"timestamp": Math.ceil(new Date().getTime()),
			"jwt": this.state.jwt
		}
		this.state.ws.send(JSON.stringify(sendData));
		setTimeout(() => {
			this.setState({
				isConfirmPay: false
			})
		})
	}

	// scrollToEnd
	scrollToEnd = () => {
		setTimeout(() => {
			this.refs.chatList.scrollToEnd()
		}, 200)
	}
	// 开始倒计时
	countTime = () => {
		if (timer) {
			clearInterval(timer)
		}
		const deadline = this.state.orderData.TxEndTime
		const now = new Date().getTime() / 1000
		this.setState({
			second: (deadline - now) < 0 ? 0 : (deadline - now),
			isTimeout: (deadline - now) < 0,
		})
		const timer = setInterval(() => {
			if (this.state.second <= 0) {
				clearInterval(timer)
				// 倒计时结束
				this.setState({
					isTimeout: true
				})
			} else {
				this.setState({
					second: this.state.second - 1
				})
			}
		}, 1000)
	}

	// 复制微信号
	doCopy = () => {
		//
		this.setState({
			showHelp: false
		})
		setCopy(WECHAT)
		this.refs.toast.show(i18n.t('c_succ'))
	}

	render() {
		return (
			<View style={{alignItems: 'center', flex: 1, backgroundColor: '#ff7606'}}>
				{/*toast*/}
				<Toast ref="toast" position='bottom' positionValue={200}/>
				{ this.state.loading ? (
					<Loading
						info={this.state.currentToastInfo}
					/>) : <View/> }
				{/*模态框*/}
				<Confirm
					title={i18n.t('i101')}
					negative={i18n.t('i102')}
					positive={i18n.t('i103')}
					modalVisible={this.state.modalVisible}
					handleCancelOrder={this.handleCancel}
					handleConfirmOrder={this.handleConfirm}
				>
					<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 60}}>
						<Text style={{textAlign: 'center'}}>{i18n.t('i104')}</Text>
					</View>
				</Confirm>
				{/*超时提示*/}
				<Confirm
					title={i18n.t('i105')}
					negative={i18n.t('i106')}
					positive={i18n.t('i107')}
					modalVisible={this.state.isTimeout}
					handleCancelOrder={() => this.setState({ isTimeout: false })}
					handleConfirmOrder={this.handleTimeout}
				>
					<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 60}}>
						<Text style={{textAlign: 'center'}}>{i18n.t('i109')}</Text>
					</View>
				</Confirm>
				{/*完成提示*/}
				<Confirm
					title={i18n.t('i108')}
					negative={i18n.t('i106')}
					positive={i18n.t('i107')}
					modalVisible={this.state.isFinish}
					handleCancelOrder={() => this.setState({ isFinish: false })}
					handleConfirmOrder={this.handleTimeout}
				>
					<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 60}}>
						<Text style={{textAlign: 'center'}}>{i18n.t('i110')}</Text>
					</View>
				</Confirm>
				{/*确认取消提示*/}
				<Confirm
					title={i18n.t('i101')}
					negative={i18n.t('cancel')}
					positive={i18n.t('confirm')}
					modalVisible={this.state.isCancelTrade}
					handleCancelOrder={() => this.setState({ isCancelTrade: false })}
					handleConfirmOrder={this.cancelTrade}
				>
					<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 60}}>
						<Text style={{textAlign: 'center'}}>{i18n.t('i104')}</Text>
					</View>
				</Confirm>
				{/*确认付款提示*/}
				<Confirm
					title={i18n.t('i111')}
					negative={i18n.t('cancel')}
					positive={i18n.t('confirm')}
					modalVisible={this.state.isConfirmPay}
					handleCancelOrder={() => this.setState({ isConfirmPay: false })}
					handleConfirmOrder={this.confirmPay}
				>
					<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 60}}>
						<Text style={{textAlign: 'center'}}>{ i18n.t('i112') }</Text>
					</View>
				</Confirm>
				{/*联系客服提示*/}
				<Confirm
					title={i18n.t('i113')}
					negative={i18n.t('back')}
					positive={ i18n.t('i114') }
					modalVisible={this.state.showHelp}
					handleCancelOrder={() => this.setState({ showHelp: false })}
					handleConfirmOrder={this.doCopy}
				>
					<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'column', paddingHorizontal: 60}}>
						<Text style={{textAlign: 'center'}}>{i18n.t('i115')}</Text>
						<Text style={{textAlign: 'center', fontSize: 28, lineHeight: 35}}>{ WECHAT }</Text>
					</View>
				</Confirm>
				{ this.state.orderData ? (
					<View style={[base.flex_1, { width: '100%', height: '100%', alignItems: 'center' }]}>
						{/*订单详情*/}
						<View style={[styles.bx, {paddingTop: 20, paddingBottom: 20}]}>
							<View style={[styles.flex_row_between]}>
								<View style={[styles.flex_row_start]}>
									<Text style={[styles.c_gray]}>{i18n.t('i116')}：</Text>
									<Text style={[styles.c_black]}>{ this.state.orderData.OrderNumber }</Text>
								</View>
								<View>
									<Text style={[styles.c_orange, {fontSize: 18}]}> { txStateType[this.state.orderData.State] } </Text>
								</View>
							</View>
							<View>
								<Text style={[styles.c_black]}>
									{i18n.t('i117')}
									<Text style={[styles.c_blue, {fontSize: 18}]}>
										{this.state.orderData.TxPartyName}
									</Text> {i18n.t('i118')}
									<Text>{ this.state.orderData.Sum }</Text>
									FCC</Text>
							</View>
							<View style={[styles.flex_row_between]}>
								<Text style={[styles.c_gray]}>{i18n.t('i119')} </Text>
								<Text style={[styles.c_orange]}><Text>{ this.state.orderData.Total }</Text> HKD</Text>
							</View>
							<View style={[styles.flex_row_start]}>
								<Text style={[styles.c_gray]}>{i18n.t('i120')}：</Text>
								<Text style={[styles.c_black]}><Text>{ this.state.orderData.Unit }</Text> <Text>FCC/HKD</Text></Text>
							</View>
							<View style={[styles.flex_row_start]}>
								<Text style={[styles.c_gray]}>{i18n.t('i121')}：</Text>
								<Text style={[styles.c_black]}><Text>{ this.state.orderData.Sum }</Text> FCC</Text>
							</View>
							<View style={[styles.flex_row_between]}>
								<Text style={[styles.c_gray]}>{i18n.t('i122')}：</Text>
								<View style={[styles.flex_row_start, {flex: 1, justifyContent: 'space-around', paddingHorizontal: 10}]}>
									<Text style={[styles.c_black]}>{ this.state.orderData.BankName }</Text>
									<Text style={[styles.c_black]}>{ (this.state.bankData ? this.state.bankData.bankName : '---') }</Text>
									<Text style={[styles.c_black]}>{ (this.state.bankData ? this.state.bankData.cardTypeName : '---') }</Text>
								</View>
							</View>
							<View style={[styles.flex_row_between, {width: '55%'}]}>
								<Text style={[styles.c_black]}>{ this.state.orderData.BankNumber.slice(0, 4) }</Text>
								<Text style={[styles.c_black]}>{ this.state.orderData.BankNumber.slice(4, 8) }</Text>
								<Text style={[styles.c_black]}>{ this.state.orderData.BankNumber.slice(8, 12) }</Text>
								<Text style={[styles.c_black]}>{ this.state.orderData.BankNumber.slice(12, 16) }</Text>
								<Text style={[styles.c_black]}>{ this.state.orderData.BankNumber.slice(16) }</Text>
							</View>
							<View style={[styles.flex_row_start]}>
								<Text style={[styles.c_gray]}>{i18n.t('i123')}：</Text>
								<Text style={[styles.c_black]}>{i18n.t('i122')}</Text>
							</View>
							<View style={[styles.flex_row_between]}>
								<View style={[styles.flex_row_start]}>
									<Text style={[styles.c_gray]}>{i18n.t('i124')}：</Text>
									<Text style={[styles.c_black]}>{this.state.orderData.ReferenceNumber}</Text>
								</View>
								{ this.state.second > 0 ? (
									<View style={[styles.flex_row_start]}>
										<Text style={[styles.c_gray]}>{i18n.t('i125')}：</Text>
										<Text style={[styles.c_blue]}>
											<Text>
												{
													(Math.floor(this.state.second / 60)).toString().length < 2 ?
														( '0' + Math.floor(this.state.second / 60)) :
														(Math.floor(this.state.second / 60)).toString()
												}
											</Text>
											:
											<Text>
												{
													(Math.floor(this.state.second % 60)).toString().length < 2 ?
														('0' + Math.floor(this.state.second % 60)) :
														Math.floor(this.state.second % 60)
												}
											</Text>

										</Text>
									</View>
								) : null }
							</View>
							{/*按钮*/}
							{ (this.state.second > 0 && !this.state.isPayed ) ? (
								<View style={{width: '100%', flexDirection: 'row', justifyContent: 'flex-end', paddingVertical: 15, paddingBottom: 0}}>
									<TouchableOpacity
										style={{width: '25%', height: 35, borderRadius: 5, borderColor: '#ff7606', borderWidth: 1, marginRight: 20, backgroundColor: '#fff'}}
										onPress={()=>{ this.setState({ isCancelTrade: true }) }}
									>
										<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
											<Text style={{color: '#ff7606'}}>{i18n.t('i128')}</Text>
										</View>
									</TouchableOpacity>
									<TouchableOpacity onPress={() => this.setState({ isConfirmPay: true })} style={{width: '25%', height: 35, borderRadius: 5, borderColor: '#fff', borderWidth: 1}}>
										<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
											<Text style={{color: '#fff'}}>{i18n.t('i129')}</Text>
										</View>
									</TouchableOpacity>
								</View>
							) : null }
							{/*超时但已付款  联系客服*/}
							{ ((this.state.isTimeout || this.state.second <= 0) && this.state.isPayed && !this.state.isFinish ) ? (
								<View style={{width: '100%', flexDirection: 'row', justifyContent: 'flex-end', paddingVertical: 15, paddingBottom: 0}}>
									<TouchableOpacity
										style={{width: '25%', height: 35, borderRadius: 5, borderColor: '#ff7606', borderWidth: 1, marginRight: 20, backgroundColor: '#fff'}}
										onPress={()=>{ this.setState({ showHelp: true }) }}
									>
										<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
											<Text style={{color: '#ff7606'}}>{i18n.t('i130')}</Text>
										</View>
									</TouchableOpacity>
								</View>
							) : null }
						</View>
						{/*对话框*/}
						<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', width: '100%', backgroundColor: '#eee'}}>
							{/*聊天内容*/}
							<View style={{flex: 1, width: '100%'}}>
								<FlatList
									style={[base.flex_1, {paddingHorizontal: 15}]}
									contentContainerStyle={{ paddingTop: 20, paddingBottom: 15 }}
									data={this.state.chatData}
									ref={'chatList'}
									renderItem={({item}) => {
										if (item.side == 0) {
											return (
												<View style={[base.flex_col_center, { width: '100%', paddingVertical: 10, paddingBottom: 25, paddingHorizontal: 0, alignItems: 'flex-start' }]}>
													{/*time*/}
													<View style={[base.flex_col_center, {paddingVertical: 10, width: '100%'}]}>
														<Text style={{fontSize: 12, color: '#999'}}>{ getLocalTime(item.timestamp/1000) }</Text>
													</View>
													{/*content*/}
													<View style={[base.flex_row_end, { paddingLeft: 50, width: '100%' }]}>
														{/*text*/}
														<View style={[base.flex_col_center, { paddingVertical: 10, marginRight: 15, paddingHorizontal: 10, borderRadius: 8, backgroundColor: '#a0ea86'}]}>
															<Text>{ item.content }</Text>
														</View>
														{/*avatar*/}
														<View style={[base.flex_col_center, { width: 40, height: 40, borderRadius: 20, backgroundColor: '#000', borderWidth: 0.3 }]}>
															<Text style={{ fontSize: 30, fontWeight: 'bold', color: '#fff' }}>{ item.username.slice(0, 1) }</Text>
														</View>
													</View>
												</View>
												)
										} else if (item.side == 1) {
											// 左边
											return (
												<View style={[base.flex_col_center, { width: '100%', paddingVertical: 10, paddingBottom: 15, paddingHorizontal: 0, alignItems: 'flex-start' }]}>
													{/*time*/}
													<View style={[base.flex_col_center, {paddingVertical: 10, width: '100%'}]}>
														<Text style={{fontSize: 12, color: '#999'}}>{ getLocalTime(item.timestamp/1000) }</Text>
													</View>
													{/*content*/}
													<View style={[base.flex_row_start, { paddingRight: 50 }]}>
														{/*avatar*/}
														<View style={[base.flex_col_center, { width: 40, height: 40, borderRadius: 20, borderWidth: 0.1, backgroundColor: '#fff' }]}>
															<Text style={{ fontSize: 30, fontWeight: 'bold', color: '#000' }}>{item.username.slice(0, 1)}</Text>
														</View>
														{/*text*/}
														<View style={[base.flex_col_center, { paddingVertical: 10, marginLeft: 15, paddingHorizontal: 10, borderRadius: 8, backgroundColor: '#fff', borderWidth: 0.1}]}>
															<Text>{item.content}</Text>
														</View>
													</View>
												</View>
												)
										} else if (item.side == 2) {
											// 中间的状态
											return (
												<View style={[base.flex_col_center, { width: '100%', paddingVertical: 10 }]}>
													{/*time*/}
													<View style={[base.flex_col_center, {paddingVertical: 10, width: '100%'}]}>
														<Text style={{fontSize: 12, color: '#999'}}>{ getLocalTime(item.timestamp/1000) }</Text>
													</View>
													<View style={[base.flex_col_center, {width: '100%'}]}>
														<View style={{ paddingVertical: 8, paddingHorizontal: 15, backgroundColor: '#c9c9c9', borderRadius: 5 }}>
															<Text style={{ fontSize: 14, color: '#fff' }}>{ txStateType[item.state] }</Text>
														</View>
													</View>
												</View>
											)

										} else {
											return (
												<View style={[base.flex_col_center, { width: '97%', paddingHorizontal: 10, paddingVertical: 10, borderRadius: 10, backgroundColor: '#c9c9c9' }]}>
													<Text style={{ color: '#fff', fontSize: 14, lineHeight: 18 }}>{i18n.t('i131')}</Text>
												</View>
											)
										}
									}}
								/>
									{/*<View style={[base.flex_col_center, { width: '100%', paddingBottom: 20 }]}>*/}
									{/*</View>*/}
								{/*</FlatList>*/}
							</View>
							{/*底部输入框*/}
							<View style={{height: 60, backgroundColor: '#fff', flexDirection: 'row'}}>
								<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
									<TextInput
										underlineColorAndroid="transparent"
										autoCapitalize={'none'}
										autoCorrect={false}
										editable={ this.state.second > 0 ? true : false }
										value={this.state.currentMessage}
										onChangeText={(currentMessage) => this.setState({currentMessage})}
										style={{ paddingLeft: 10, width: '95%', height: '70%', borderWidth: 0.5, borderColor: '#bfbfbf', borderRadius: 5, backgroundColor: this.state.second > 0 ? '#fff' : '#eee' }}
									/>
								</View>
								<View style={{width: '22%', height: '100%', justifyContent: 'center', alignItems: 'center'}}>
									<TouchableOpacity onPress={this.sendMessage} style={{width: '85%', height: '70%'}}>
										<View style={{flex: 1, borderWidth: 0.5, borderColor: this.state.second > 0 ? '#ff7606' : '#fff', backgroundColor: this.state.second > 0 ? '#ff7606' : '#808080', justifyContent: 'center', alignItems: 'center', borderRadius: 5}}>
											<Text style={{color: '#fff', fontSize: 16}}>{i18n.t('i132')}</Text>
										</View>
									</TouchableOpacity>
								</View>
							</View>
						</View>
					</View>
				) : null }
			</View>
		)
	}
}

const styles = 	StyleSheet.create({
	bx: {
		width: '90%'
	},
	c_gray: {
		color: '#fff',
		fontSize: 16
	},
	c_black: {
		color: "#fff",
		fontSize: 16
	},
	c_blue: {
		color: '#fdbf24',
		fontSize: 16
	},
	c_orange: {
		color: '#fdbf24',
		fontSize: 16
	},
	flex_row_between: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		height: 25,
		width: '100%',
		alignItems: 'center'
	},
	flex_row_start: {
		flexDirection: 'row',
		justifyContent: 'flex-start',
		height: 25,
		alignItems: 'center'
	}
})
